@font-face {
    font-family: 'PingFangSC-Regular';
    src: url(../font/PingFangSC-Regular.ttf);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border: none;
    outline: none;
    font-family: 'PingFangSC-Regular', '微软雅黑';

}

a {
    text-decoration: none;
}


html {
    font-size: 100px;

}

.app {
    position: relative;
    font-size: .14rem;
    min-width: 1100px;
    width: 100%;
    height: 100%;
    margin: auto;
    overflow: auto;
    background: url(../img/bg.png);
    background-size: cover;
    background-repeat: no-repeat;
    color: #fff;
}

html,
body {
    width: 100%;
    height: 100%;
    cursor: default;
}


/* 标题 */
.header {
    width: 100%;
    height: 0.51rem;
    background: url(../img/header.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    font-size: 0.16rem;
    position: relative;
    display: flex;
    align-items: center;
    margin-top: 0.08rem;
}

.header-title {
    width: 4.2rem;
    height: 100%;
    color: rgba(243, 252, 255, 1);
    font-size: 0.24rem;
    font-weight: 700;
    text-indent: 0.3rem;
    white-space: nowrap;
    margin-top: 0.08rem;
    color: transparent;
    background-image: linear-gradient(to left, #00dbff, #73ffbd);
    -webkit-background-clip: text;
    background-clip: text;
}

.header-menu {
    width: calc(100% - 8rem);
    margin-left: 1.2rem;
    height: 100%;
    display: flex;
    align-items: flex-end;
    cursor: pointer;
}


.header-menu-item {
    /* width: 1.47rem;
    height: 0.32rem;
    font-size: 0.16rem;
    text-align: center;
    color: rgba(223, 238, 243, 1);
    position: relative; */
    width: 2rem;
    height: 0.44rem;
    text-align: center;
    color: rgba(223, 238, 243, 1);
    position: relative;
    font-size: 0.18rem;
    letter-spacing: 2px;
}

.header-menu-item.active {
    background: url(../img/menu-active.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    -webkit-box-reflect: below 2px linear-gradient(transparent, rgba(42, 224, 164, 0.3));

}

.header-menu-item.active>span {
    border-bottom: 0.02rem solid #07D5C0;
    font-style: italic;
    color: rgba(48, 255, 234, 1);
    font-weight: 700;
    font-family: '微软雅黑';
    padding-bottom: 0.1rem;
    text-shadow: 2px 2px 3px rgb(9, 9, 9, 0.5);
}

.header-menu-item:hover {
    color: rgb(93, 221, 208);
}

.header-tool {
    position: absolute;
    top: 0.1rem;
    right: 0.3rem;
    display: flex;
    font-size: 0.2rem;
    color: #2CFFFC;
    align-items: center;
    background: linear-gradient(to right, #43E3E1, #1bdba5);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    text-shadow: 2px 2px 1px #59c8fd66;
    clip-path: circle(0% at 50% 50%);
    animation: clip 0.75s linear forwards;
}

@keyframes clip {
    0% {
        clip-path: circle(0% at 50% 50%);
    }

    50% {
        clip-path: circle(30% at 50% 50%);
    }

    100% {
        clip-path: circle(100% at 50% 50%);
    }
}

.logout {
    width: 0.21rem;
    height: 0.21rem;
}

.changePwd {
    width: 0.18rem;
    height: 0.21rem;
    margin: 0 0.15rem 0 0.3rem;
}

sup {
    position: relative;
    padding: 2px 5px 2px 3px;
    color: #fff;
    font-size: 0.12rem;
    border-radius: 0.05rem;
    left: -0.05rem;
}
.header-supply{
    padding: 0 0.05rem;
}

.layui-table-view::after {
    background-color: transparent;
}

#table-header~div .layui-table-header {
    background:
        #318E93;
}

.layui-layer-setwin .layui-layer-close2 {
    right: -8px;
    top: 0px;
}

/* end */


/* 通用主体 */
.contain {
    width: 100%;
    height: calc(100% - 0.59rem);
    display: flex;
}

.contain-menu {
    width: 15.6%;
    height: 100%;

}

.contain-menu>ul {
    background-color: #05363E;
    padding-top: 0.32rem !important;
    width: 100% !important;
}

.menu-item {
    width: 100%;
    height: 0.58rem;
    line-height: 0.58rem;
    color: rgba(226, 241, 255, 1);
    font-size: 0.15rem;
    cursor: pointer;
}

.menu-item.active {
    background-color: #067482;
    color: #fff;
}

.menu-item.active:hover {
    background-color: #067482;
}

.menu-item:hover {
    background-color: #06748266;
}

.sub-menu-item {
    display: flex;
    align-items: center;
    justify-content: start;
    height: 0.5rem;
    letter-spacing: 1px;
    color: #E2F1FF;
}

.sub-menu-item>img {
    width: 0.2rem;
    margin-right: 0.15rem;
}

.contain-table {
    width: 84.4%;
    height: 100%;
    padding: 0.1rem 0.25rem;
}

.contain-table-tool {
    width: 100%;
    height: 1rem;
}



.contain-table-tool>form {
    width: 100%;
    margin-top: 0.2rem;
    height: calc(100% - 0.2rem);
    display: flex;
    align-items: center;
}

.contain-table-list {
    width: 100%;
    height: calc(100% - 1.3rem);
    min-height: 6rem;
    background: url(../img/bg-table.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: flex;
    overflow: hidden;
}

.contain-table-list.bg-con {
    background-image: url(../img/bg-con.png);
}

/* end */



/* layui */
.layui-input,
.layui-select,
.layui-textarea {
    height: 0.32rem;
}

.layui-btn {
    width: 1rem;
    height: 0.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.18rem;
    font-size: 0.14rem;
    margin-left: 0.1rem;
    border-radius: 2px;
    border: 0.01rem solid transparent;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    background-image: linear-gradient(180deg, rgba(96, 231, 236, 1) 0%, rgba(17, 81, 96, 1) 100%), linear-gradient(0, #1799AA, #79FDFF, #1799AA);
}

.layui-layer-btn0 {
    border: 0.01rem solid transparent;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    background-image: linear-gradient(180deg, rgba(96, 231, 236, 1) 0%, rgba(17, 81, 96, 1) 100%), linear-gradient(0, #1799AA, #79FDFF, #1799AA);
}

.layui-layer-btn1 {
    border: 0.01rem solid transparent !important;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    background-image: linear-gradient(180deg, rgb(73, 207, 238) 0%, rgb(4, 122, 149) 100%), linear-gradient(0, #3785AC, #77B9D2, #3AA4E3);
    color: #003c53;
}

.layui-btn.layui-btn-xs {
    width: 0.8rem;
    height: 0.32rem;
}

.layui-table-grid-down,
.layui-table-grid-down:hover {
    background-color: transparent;
}

.layui-table-tips-main {
    background-color: #00394f;
    color: #E2F1FF;
    border-radius: 3px;
}

.layui-btn-sm {
    height: 0.3rem;
    line-height: 0.3rem;
    padding: 0 0.1rem;
    font-size: 0.12rem;
}

.layui-btn>img {
    width: 0.2rem;
    height: 0.2rem;
    margin-right: 0.04rem;
}

.layui-btn.add {
    margin: 0 0.08rem 0 auto;
}

.layui-form-select dl {
    background-color: #0B303A;
    border: 1px solid #2A9EAD;
}

.layui-form-select .layui-edge {
    right: 0.2rem;
}

.layui-form-select dl dd:hover {
    background-color: #158a7a;
    color: #fff;
}



.layui-layer-title {
    padding: 0 0.8rem 0 0.2rem !important;
    height: 0.56rem !important;
    line-height: 0.56rem !important;
    border-bottom: none !important;
    font-size: 0.16rem !important;
    color: #40e4ff !important;
    background: linear-gradient(270deg, rgb(38, 60, 71), #025F6F 0%);
    border-radius: 0.02rem 0.02rem 0 0 !important;
}

.layui-layer-title>img {
    width: 0.25rem;
    height: 0.25rem;
}

.layui-layer-title>i {
    margin-right: 0.1rem;
}

.layui-layer-page .layui-layer-content {
    background-color: #1B3F46;
    background-image: linear-gradient(#1B3F46, #112937);
    border-radius: 0 0 0.02rem 0.02rem;
}

.layui-table {
    background-color: transparent;
    color: #E2F1FF;
}

.layui-table td,
.layui-table th {
    font-size: 0.16rem;
    font-weight: 400;
}

.layui-dropdown {
    border-radius: 0.04rem;
    background: linear-gradient(0deg, rgba(12, 86, 114, 1) 0%, rgba(5, 43, 62, 1) 100%);
    border-image: linear-gradient(0deg, #42BAA7, #0fa1f900) 1;

    ul {
        background: linear-gradient(0deg, rgba(12, 86, 114, 1) 0%, rgba(5, 43, 62, 1) 100%);

        .layui-menu-body-title {
            color: #56F4FE;
            font-size: 0.16rem;
        }
    }
}

.layui-menu li:hover {
    background-color: #309EAE;
}

.table-tool {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 100%;
}

.table-edit {
    background-image: linear-gradient(180deg, rgb(27, 151, 146) 0%, rgb(29, 157, 122) 100%), linear-gradient(0, #139f93, #4ce1c8, #0be8b4);
}

.table-del {
    background-image: linear-gradient(180deg, #CE6729 0%, #CE6729 100%), linear-gradient(0, #d0792b, #ffbd6a, #bf8858);
    margin-right: 0.1rem;
}

.table-record {
    background-image: linear-gradient(180deg, rgb(72, 153, 225) 0%, rgb(29, 119, 172) 100%), linear-gradient(0, #12839D, #51C9F9, #15A0B3);
}

.table-del img {
    filter: drop-shadow(0 0 1px #000) hue-rotate(240deg);
}

/* .table-edit {
    background: #009688;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    background-image: linear-gradient(180deg, #04a25f 0%, rgb(27, 89, 66) 100%), linear-gradient(0, #20B95C, #79FFB4, #40B93C);
}

.table-del {
    background: #FF0101;
    margin-right: 0.1rem;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    background-image: linear-gradient(180deg, #F05858 0%, #b51212 100%), linear-gradient(0, #f95252, #FB9494, #ff6565);
}

.table-record {
    background: #237db3;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    background-image: linear-gradient(180deg, #318aa6 0%, #1b6593 100%), linear-gradient(0, #2a7eb3, #98c4df, #55bbe3);
}

.table-del img {
    filter: hue-rotate(0deg) brightness(100%) saturate(0%);


} */



.table-tool>div {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.12rem;
    cursor: pointer;
    border-radius: 0.02rem;
    padding: 0.02rem 0.08rem !important;
    height: 0.24rem;
    line-height: 0.24rem;
    width: auto;
}

.table-tool img {
    width: 0.14rem;
    height: 0.14rem;
    margin-right: 0.04rem;
}

.layui-layer {
    background-color: #1B3F46;
    background-image: linear-gradient(#1B3F46, #112937);
    color: #eee;
}

.layui-layer.layui-layer-dialog.layui-layer-border.layui-layer-msg {
    background-color: #1B3F46;
    background-image: linear-gradient(#135c6a, #1c9ae666);
    color: #eee;
    box-shadow: 2px 2px 3px #0000007d;
    border: 1px solid #166d82;
}

.layui-table thead tr,
.layui-table-click,
.layui-table-header,
.layui-table-hover,
.layui-table-mend,
.layui-table-patch,
.layui-table-tool,
.layui-table-total,
.layui-table-total tr,
.layui-table[lay-even] tr:nth-child(2n) {
    background-color: transparent;
}

.layui-table[lay-even] tbody tr:nth-child(2n) {
    background: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(13, 44, 49, 0.5));
}

.layui-table-cell-c {
    background-color: #0d2d39;
    border: 1px solid #40648a;
}

.layui-table-expanded .layui-table-cell {
    height: auto !important;
}

.layui-table-hover {
    background-color: #13749733 !important;

}

.layui-table td {
    border: none !important;
    border-bottom: 1px solid #19404F !important;
}

.layui-table th,
.layui-table-col-set,
.layui-table-fixed-r,
.layui-table-grid-down,
.layui-table-header,
.layui-table-page,
.layui-table-tips-main,
.layui-table-tool,
.layui-table-total,
.layui-table-view,
.layui-table[lay-skin="line"],
.layui-table[lay-skin="row"] {
    border: transparent;
}

.layui-table-page {
    position: absolute;
    bottom: 0.1rem;
    text-align: right;
    border-top: 1px solid #19404F;
}

.layui-laypage .layui-laypage-skip,
.layui-table-page .layui-laypage a,
.layui-table-page .layui-laypage span {
    color: #fff;
}

.layui-laypage .layui-laypage-curr .layui-laypage-em {
    background-color: #145d6b;
}

.layui-laypage button,
.layui-laypage input {
    background-color: #145d6b;
    color: #fff;
}

.layui-laypage button {
    border: none;
}

.layui-form-label {
    height: 0.4rem !important;
    background-color: #136873 !important;
    border: 0.01rem solid #136873 !important;
    border-radius: .01rem !important;
    color: #eaeaea !important;
    line-height: 0.4rem !important;
    padding: 0 !important;
    font-size: 0.16rem;
}

.layui-table-view {
    margin: 0 0 0 0.04rem;
    position: relative;
}

.layui-layer-page .layui-table-view {
    margin: 0;
}

.layui-input-block {
    min-height: auto;
}

.layui-form-radio {
    line-height: .32rem;
    margin: 0 .1rem 0 0;
    padding-right: .1rem;
}

.layui-form-radio>i {
    margin-right: .08rem;
    font-size: .22rem;
}

.layui-form-radio * {
    font-size: .14rem;
    color: #fff;
}

.layui-input:hover,
.layui-textarea:hover {
    border-color: #03E4EF !important;
}

.layui-slider-input-txt input {
    width: 100% !important;
    color: black !important;
}

.layui-slider-input-btn {
    display: block !important;
    opacity: 1 !important;
}

.layui-flow-more {
    text-align: center;
    color: #fff;
    font-style: italic;
}

.table-span {
    text-decoration: underline;
    font-style: italic;
    cursor: pointer;
    color: #90f3fd;
}

.table-span:hover {
    color: #13a4f8;
}

cite {
    color: #fff;
    font-size: 0.16rem;
}

/* end */

/* 高德地图 */
.amap-info-content {
    background: transparent;
}

.amap-logo,
.amap-copyright {
    display: none !important;
}

.amap-info-close {
    top: 0rem;
    right: 0 !important;
    width: .15rem;
    height: .15rem;
}

/* end */

.layui-form input {
    width: 3rem;
    height: 0.4rem;
    background-color: #0B303A;
    border: 0.01rem solid #2A9EAD;
    border-radius: .01rem;
    color: #fff;
    margin-right: 0.1rem;
    font-size: 0.16rem;
}

.layui-input-suffix {
    display: flex;
    align-items: center;
    right: 0.1rem;
}

.layui-input-affix .layui-icon-clear {
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.2rem;

}

.layui-input-affix .layui-icon:hover {
    color: rgba(255, 255, 255, .6);
}

.layui-form-select dl dd.layui-this {
    background-color: #184957;
    color: #16b777;
    font-weight: 400;
}

.layui-form-select {
    color: #e1e1e1;
}

.layui-form-pane>.form-item {
    margin: 0.2rem;
}

.layui-form-pane .layui-input {
    border: 0.01rem solid #1D5E66;
    width: 100%;
}

.layui-form-pane .layui-form-label,
.layui-form-pane input {
    height: 0.56rem !important;
    line-height: 0.56rem !important;
    width: 1.8rem;
}

.layui-form-pane .layui-input-block {
    margin-left: 1.8rem;
}

.layui-layer-setwin span {
    color: #fff;
}

.layui-layer-setwin {
    top: 0.1rem;
}

.pane-tool {
    display: flex;
    justify-content: flex-end;
}

.btn-reset {
    background-image: linear-gradient(180deg, rgb(255, 255, 255) 0%, rgb(53, 191, 223) 100%), linear-gradient(0, #0CD9F4, #79FDFF, #2397A6);
    color: #555;
}

.checkbox-input {
    height: 0.56rem !important;
    line-height: 0.56rem !important;
    border: 0.01rem solid #1D5E66;
    background-color: #0B303A;
}

.layui-layer-min::before {
    border-bottom: 1px solid #fff !important;
}

.layui-layer-setwin .layui-layer-max::after,
.layui-layer-setwin .layui-layer-max::before {
    border: 1px solid #fff !important;
}

.layui-badge {
    font-size: 0.14rem;
    cursor: pointer;
}

.layui-transfer-box {
    background-color: #0B262D;
    border: none;
    box-shadow: 2px 3px 5px #0009;
}

.layui-transfer-header,
.layui-transfer-search {
    border-color: #0e3944;
}

.layui-transfer-data li:hover {
    background-color: #103f4a;
}

.layui-table-checked {
    background-color: #1085b0b2 !important;
}

.layui-nav-tree .layui-nav-child dd.layui-this,
.layui-nav-tree .layui-nav-child dd.layui-this a,
.layui-nav-tree .layui-this,
.layui-nav-tree .layui-this>a,
.layui-nav-tree .layui-this>a:hover {
    background-color: #067482;
    color: #fff;
}

.layui-nav * {
    font-size: 0.16rem;
}

.layui-nav-tree .layui-nav-item a {
    height: auto;
}




/* 卡片特效封装样式 */

.gradient-card {

    color: #E2F1FF;
    cursor: pointer;
    position: relative;
    transition: color 1s;
    overflow: hidden;

    &::before,
    &::after {
        content: "";
        position: absolute;
        width: 0;
        height: 0;
        top: 0;
        left: 0;
        box-sizing: border-box;
        border: 0.01rem solid transparent;
    }

    &:hover {
        transition: all 0.3s;
        color: #ccfffc;
        transform: translateY(-0.01rem);
        box-shadow: 4px 4px 10px 2px #181818;
        background-image: linear-gradient(30deg, #21f5b508, #09c7e008, #198ad608);
        animation: hueRotate 4s infinite alternate;

        & img {
            transition: all 0.3s;
            filter: drop-shadow(0 0 5px #00ffc3) drop-shadow(3px 3px 2px #000);
        }

        &::before {
            transition: width 0.25s, height 0.25s, border-bottom-color 0s;
            transition-delay: 0.25s, 0s, 0.25s;
            height: 100%;
            width: 100%;
            border-left: 0.01rem solid #00e2ff;
            border-bottom: 0.01rem solid #00ffdd;
        }

        &::after {
            transition: width 0.25s, height 0.25s, border-right-color 0.25s;
            transition-delay: 0s, 0.25s, 0.25s;
            height: 100%;
            width: 100%;
            border-top: 0.01rem solid #00e2ff;
            border-right: 0.01rem solid #00e2ff;
        }
    }

}


@keyframes hueRotate {
    100% {
        filter: hue-rotate(30deg);
    }
}



/* 卡片特效封装样式 */

@property --angle {
    syntax: '<angle>';
    inherits: true;
    initial-value: 120deg;
}

@property --drop {
    syntax: '<length>';
    inherits: true;
    initial-value: -2px;
}


/* 动态边框样式 */
.chart-border {
    /* border: 1px solid #4BE8FF;
    border-image: linear-gradient( rgba(9, 226, 248, 1), rgba(121, 253, 255, 1)); */
    background-color: #0D2D39;
    border-radius: 0.04rem;
    position: relative;

    &::before,
    &::after {
        --angle: 120deg;
        content: '';
        position: absolute;

        background-image: conic-gradient(from var(--angle), transparent 1%, rgba(9, 226, 248, 1), rgba(121, 253, 255, 1), rgb(12, 224, 154), rgba(9, 226, 248, 1));
        /* ,conic-gradient(#33ff82, #ff1ed1, #ff5b5b, #00ff70) */
        top: -1px;
        left: -1px;
        right: -1px;
        bottom: -1px;
        z-index: -1;
        border-radius: 0.04rem;
        animation: spin 10s 5s linear infinite;
    }

    &::before {
        filter: blur(2px);
        opacity: 0.5;
    }
}

@keyframes spin {
    0% {
        --angle: 120deg;
    }

    50% {
        --angle: 480deg;
    }

    100% {
        --angle: 480deg;
    }

}

/* 动态边框样式 */

.chart-title {
    width: calc(100% - 0.4rem);
    height: 0.4rem;
    color: #32C5FF;
    font-size: 0.2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-left: 0.2rem;
    margin-top: 0.1rem;
}

.chart-tool.layui-form {
    width: 1.2rem;

    input {
        width: 100%;
    }
}

.chart-con {
    width: 100%;
    height: calc(100% - 0.5rem);
}

.chart-all {
    width: 100%;
    height: calc(100% - 0.5rem);
    display: flex;
    align-items: center;
    justify-content: center;

    .chart-all-item {
        width: 4.36rem;
        height: 2.17rem;
        background-image: url(../img/chart.png);
        background-size: 100% 100%;
        margin-bottom: 0.3rem;

        .chart-circle {
            width: 0.6rem;
            position: absolute;
            top: 39%;
            height: 1rem;
            text-align: center;
            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: space-around;
            left: 1rem;

            >div:nth-child(1) {
                font-size: 0.3rem;
                color: #02FFFD;
            }
        }

        .chart-other {
            width: 1.4rem;
            position: absolute;
            top: 41%;
            height: 0.97rem;
            text-align: center;
            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: space-between;
            left: 3rem;

            div {
                display: flex;
                justify-content: space-between;
                width: 100%;
                align-items: center;

                >span:nth-child(2) {
                    font-size: 0.18rem;
                }
            }
        }
    }
}